<template>
	<view class="course-container">
		<!-- 顶部导航栏 -->
		<view class="course-header">
			<view class="back-btn" @tap="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">课程详情</text>
			<view class="header-right"></view>
		</view>
		
		<!-- 视频播放区域 -->
		<view class="video-section">
			<view class="video-player">
				<video 
					class="video-thumbnail" 
					:src="videoSrc"
					:poster="videoPoster"
					controls
					:autoplay="false"
					:loop="false"
					:muted="false"
					@error="onVideoError"
					@play="onVideoPlay"
					@pause="onVideoPause"
				></video>
				<view class="play-btn" @tap="playVideo" v-if="!isPlaying">
					<text class="play-icon">▶</text>
				</view>
			</view>
		</view>
		
		<!-- 课程信息区域 -->
		<view class="course-info">
			<view class="course-header-info">
				<view class="course-title-wrapper">
					<text class="course-title-line1">《()基础入门课程</text>
					<text class="course-title-line2">5分钟基础动作讲解》</text>
				</view>
				<text class="course-subtitle">自由自在的舞蹈</text>
			</view>
			
			<!-- 互动按钮区域 -->
			<view class="action-buttons">
				<view class="action-btn" @tap="toggleLike">
					<text class="action-icon" :class="{'liked': isLiked}">{{isLiked ? '❤️' : '🤍'}}</text>
					<text class="action-count">{{likeCount}}</text>
				</view>
				<view class="action-btn" @tap="shareVideo">
					<text class="action-icon">📤</text>
					<text class="action-count">分享</text>
				</view>
			</view>
			
			<!-- 开始练习按钮 -->
			<view class="start-practice">
				<button class="practice-btn" @tap="startPractice">开始练习</button>
			</view>
		</view>
		
		<!-- 课程描述 -->
		<view class="course-description">
			<text class="description-text">适合初学者的基础入门课程，通过简单易学的动作，让你快速掌握舞蹈基本功。课程内容包括基础姿态、节拍训练、基础步伐等，帮助你建立良好的舞蹈基础。</text>
		</view>
		
		<!-- 相关课程推荐 -->
		<view class="related-courses">
			<view class="section-title">相关课程推荐</view>
			<view class="course-list">
				<view class="course-item" v-for="(course, index) in relatedCourses" :key="index" @tap="openCourse(course)">
					<image class="course-thumbnail" :src="course.thumbnail" mode="aspectFill"></image>
					<view class="course-content">
						<text class="course-name">{{course.name}}</text>
						<text class="course-author">{{course.author}}</text>
						<text class="course-desc">{{course.description}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Course',
	data() {
		return {
			isLiked: false,
			likeCount: 128,
			isPlaying: false,
			videoSrc: '/static/WeChat_20250618170943.mp4', // 使用static目录中的视频文件
			videoPoster: "https://gitee.com/jxywb/wudong-dance/blob/master/resource/WeChat_20250618170943.mp4"||require('../../static/bg-logo.png'), // 使用require导入logo作为封面
			relatedCourses: [
				{
					id: 1,
					name: 'Quick Start 提升练习的细节',
					author: 'Author name',
					description: '适合基础练习的提升，适合想要提升舞蹈技巧的学员',
					thumbnail: '/static/course1.jpg'
				},
				{
					id: 2,
					name: 'Author name',
					author: 'Author name',
					description: '适合基础练习的提升，适合想要提升舞蹈技巧的学员',
					thumbnail: '/static/course2.jpg'
				},
				{
					id: 3,
					name: 'Author name',
					author: 'Author name',
					description: 'Quick Start infrastructure Facts with Streamlit OSS demo',
					thumbnail: '/static/course3.jpg'
				},
				{
					id: 4,
					name: 'Author name',
					author: 'Author name',
					description: 'Quick Start infrastructure Facts with Streamlit OSS demo',
					thumbnail: '/static/course4.jpg'
				}
			]
		}
	},
	methods: {
		playVideo() {
			this.isPlaying = true;
			// 如果有视频组件，可以通过ref控制播放
			uni.showToast({
				title: '开始播放视频',
				icon: 'success'
			});
		},
		onVideoPlay() {
			this.isPlaying = true;
		},
		onVideoError(e) {
			console.error('视频播放错误:', e);
			uni.showToast({
				title: '视频加载失败，请检查网络连接',
				icon: 'none',
				duration: 3000
			});
			this.isPlaying = false;
		},
		onVideoPause() {
			this.isPlaying = false;
		},
		toggleLike() {
			this.isLiked = !this.isLiked;
			this.likeCount += this.isLiked ? 1 : -1;
		},
		shareVideo() {
			uni.showToast({
				title: '分享课程',
				icon: 'success'
			});
		},
		startPractice() {
			uni.navigateTo({
				url: '/pages/practice/practice'
			});
		},
		openCourse(course) {
			uni.showToast({
				title: `打开课程: ${course.name}`,
				icon: 'none'
			});
		},
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style scoped>
.course-container {
	background: #FFFFFF;
	min-height: 100vh;
	padding-top: 140rpx;
}

.course-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	padding: 60rpx 30rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 9999;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.back-btn {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F5F5F5;
	border-radius: 40rpx;
	border: 1rpx solid #E0E0E0;
}

.back-icon {
	font-size: 40rpx;
	color: #333333;
	font-weight: bold;
}

.header-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.header-right {
	width: 60rpx;
}

.video-section {
	position: relative;
	height: 500rpx;
	background: #000000;
}

.video-player {
	width: 100%;
	height: 100%;
	position: relative;
}

.video-thumbnail {
	width: 100%;
	height: 100%;
}

.play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120rpx;
	height: 120rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-icon {
	font-size: 48rpx;
	color: #FF6B9D;
	margin-left: 8rpx;
}

.course-info {
	padding: 30rpx;
	background: #FFFFFF;
}

.course-header-info {
	margin-bottom: 30rpx;
}

.course-title-wrapper {
	display: flex;
	flex-direction: column;
}

.course-title-line1 {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	line-height: 1.4;
	display: block;
	margin-bottom: 10rpx;
}

.course-title-line2 {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	line-height: 1.4;
	display: block;
}

.course-subtitle {
	font-size: 28rpx;
	color: #999999;
	display: block;
}

.action-buttons {
	display: flex;
	gap: 40rpx;
	margin-bottom: 30rpx;
}

.action-btn {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.action-icon {
	font-size: 40rpx;
}

.action-icon.liked {
	color: #FF6B9D;
}

.action-count {
	font-size: 28rpx;
	color: #666666;
}

.start-practice {
	margin-bottom: 30rpx;
}

.practice-btn {
	width: 100%;
	background: #FF6B9D;
	color: #FFFFFF;
	border: none;
	border-radius: 30rpx;
	padding: 30rpx 0;
	font-size: 32rpx;
	font-weight: bold;
}

.course-description {
	padding: 0 30rpx 30rpx;
	background: #FFFFFF;
}

.description-text {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.6;
}

.related-courses {
	padding: 30rpx;
	background: #F8F8F8;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
	display: block;
}

.course-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.course-item {
	display: flex;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.course-thumbnail {
	width: 160rpx;
	height: 120rpx;
	border-radius: 15rpx;
	margin-right: 20rpx;
	background: linear-gradient(45deg, #FF6B9D, #FFB6C1);
}

.course-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.course-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 8rpx;
	display: block;
}

.course-author {
	font-size: 24rpx;
	color: #FF6B9D;
	margin-bottom: 8rpx;
	display: block;
}

.course-desc {
	font-size: 24rpx;
	color: #999999;
	line-height: 1.4;
	display: block;
}

.video-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: linear-gradient(135deg, #FF6B9D 0%, #FFB6C1 100%);
}

.placeholder-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 100rpx;
	margin-bottom: 30rpx;
	opacity: 0.8;
}

.placeholder-text {
	text-align: center;
	position: absolute;
	bottom: 80rpx;
	left: 50%;
	transform: translateX(-50%);
}

.placeholder-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #FFFFFF;
	margin-bottom: 10rpx;
	display: block;
}

.placeholder-desc {
	font-size: 24rpx;
	color: #FFFFFF;
	opacity: 0.9;
	display: block;
}
</style> 